<template>
  <div class="attention">
    <div class="container">
      <div class="ztd" v-for="item in List" :key="item">
        <div class="header-l">
          <span><img :src="item.url" alt="" /></span>
          <div class="header-right">
            <div class="mine">{{ item.title }}</div>
            <div class="xia">
              <div class="tian">{{ item.time }}</div>
              <div class="dian">·</div>
              <div class="youxi">{{ item.samlltitle }}</div>
            </div>
          </div>
        </div>
        <div class="main">
          <!-- 判断 -->
          <div class="main-as" v-if="item.wenzhang">
            <div class="main-content">
              <div class="main-lf">
                {{ item.wenzhang }}
                <!-- <span class="main-rt">全文</span> -->
              </div>
            </div>
            <!-- <img :src="item.wenzhang" alt="" class="img-1" /> -->
          </div>
          <!-- 11 -->
          <div class="main-as" v-if="item.img">
            <div
              class="main-content"
              style="
                 {
                  height: 4.32rem !important;
                }
              "
            >
              <img :src="item.img" alt="" class="img-1" />
            </div>
          </div>

          <!-- 判断结束 -->
          <div class="footer">
            <div class="footer-div">
              <img src="../../../assets/img/3.png" alt="" class="img-2" />
              <span>{{ item.transpond }}</span>
            </div>
            <div class="footer-div">
              <img src="../../../assets/img/1.png" alt="" class="img-2" />
              <span>{{ item.comment }}</span>
            </div>
            <div class="footer-div">
              <img src="../../../assets/img/2.png" alt="" class="img-2" />
              <span>{{ item.like }}</span>
            </div>
            <div class="footer-div-1">
              <img src="../../../assets/img/4.png" alt="" class="img-3" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 添加假的 -->
  </div>
</template>

<script>
// 用于优化滚动事件和下拉加载刷新
import BetterScroll from "better-scroll";
// import { mapState, mapActions } from "vuex";
// 引入路径
import { getAttentionApi } from "../../../utils/app";
// import axios from "axios";
export default {
  setup() {},
  data() {
    return {
      List: [],
    };
  },

  mounted() {
    // this.getAttentionData();
    this.getAttentionApiasync();
  },
  methods: {
    async getAttentionApiasync() {
      const res = await getAttentionApi();
      if (res.data.status === 0) {
        this.List = res.data.result;
        await this.$nextTick();
        new BetterScroll(".attention", {
          scrollX: false,
          scrollY: true,
          click: true,
        });
      }
    },

    // async getAttentionData() {
    //   axios
    //     .get("http://121.199.14.205:3000/api/article", {
    //       params: {},
    //     })
    //     .then((response) => {
    //       if (response.data.status === 0) {
    //         const res = response.data.result;
    //         this.List = res;

    //         // await this.$nextTick();
    //         // new BetterScroll(".attention", {
    //         //   scrollX: false,
    //         //   scrollY: true,
    //         //   click: true,
    //         // });
    //       }
    //     });
    // },

    // http://121.199.14.205:3000/api/list?pageSize=7&currentPage=1
    // http://121.199.14.205:3000/api/article
    //  getMoviesData() {
    //     fetch("http://121.199.14.205:3000/api/article")
    //       .then((response) => response.json())
    //       .then((res) => {
    //         if (res.status === 0) {
    //           // this.List = res.list;
    //           this.List = res.result;
    //           console.log(this.List);
    //           // 用于优化滚动事件和下拉加载刷新要加在拿到数据以后
    //           // 第一个参数是容器的选项名（最大的那个），第二个参数的选项对象在官网上上有
    //           // await this.$nextTick();
    //           new BetterScroll(".attention", {
    //             scrollX: false,
    //             scrollY: true,
    //             click: true,
    //           });
    //         }
    //       });
  },
};
</script>

<style lang="less">
@import "../../../assets/css/reset.less";
.attention {
  position: fixed;
  top: 55px;
  bottom: 50px;
  left: 0;
  right: 0;
  background: white;
  .van-tabbar__placeholder {
    height: 50px;
  }
  .header-l {
    display: flex;
    width: 100%;
    // height: 90px;
    // border: 1px solid black;
    // position: relative;
    margin: 20px 0 15px 0;
    span {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      overflow: hidden;
      // border: 1px solid black;
      margin-right: 10px;
      // line-height: 90px;
      position: relative;
      top: 0px;
      left: 15px;
      img {
        height: 100%;
      }
    }
    display: flex;
    .header-right {
      position: relative;
      margin-left: 15px;
      .mine {
        font-size: 15px;
        font-weight: 700;
        // width: 100px;
        // height: 23px;
        position: relative;
        top: 4px;
        left: 0px;
      }
      .xia {
        display: flex;
        margin-top: 5px;
        // vertical-align: middle;
        line-height: 27px;
        .tian {
          font-size: 12px;
          color: #999;
        }
        .dian {
          width: 16px;
          text-align: center;
          // position: relative;
          // top: px;
          // left: 0px;
          // display: inline-block;
        }
        .youxi {
          font-size: 12px;
          color: #34c3c6;
          font-weight: 700;

          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          width: 100px;
        }
      }
    }
  }
  .main {
    // border: 1px solid bisque;

    .main-content {
      .main-lf {
        font-size: 15px;
        font-weight: Bold;
        line-height: 31px;
        overflow: hidden;
        // width: 300px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 5;
      }
      padding: 2px 40px 15px 16px;
      // height: 87px;
      height: 4.32rem;
      overflow: hidden;
      margin-bottom: 15px;
      position: relative;
      .main-rt {
        position: absolute;
        right: 36px;
        bottom: -7px;
        color: #34c3c6;
        background: rgba(255, 255, 255, 0.3);
        z-index: 33;
        font-size: 16px;
      }
    }
    .img-1 {
      display: block;
      width: 225px;
      height: 5rem;
      margin-left: 15px;
    }
    .footer {
      display: flex;
      width: 100%;
      height: 46px;

      .footer-div {
        flex: 1;
        width: 50%;
        display: flex;
        margin: auto;
        // border: 1px solid black;
        margin-left: 15px;
        span {
          font-size: 12px;
          color: #999;
        }
        .img-2 {
          display: block;
          width: 19px;
          height: 15px;
          margin-right: 5px;
        }
      }
      .footer-div-1 {
        // border: 1px solid black;
        flex: 2;
        position: relative;
        .img-3 {
          display: block;
          width: 3px;
          height: 10px;
          position: absolute;
          top: 18px;
          right: 30px;
        }
      }
    }
  }
}
</style>
